<template>
  <div class="page-course">
    <div class="coursepos">
      <!-- 导航栏 -->
      <div class="navigationbar">
        <Breadcrumb separator=">">
          <Breadcrumb-item href>课程分类></Breadcrumb-item>
        </Breadcrumb>
      </div>
      <!--菜单栏  -->
      <div class="menubar">
        <div class="menubarlist">
          <div class="listname">
            <p>专业类型:</p>
          </div>
          <div class="listbody">
            <a>全部</a>
            <a>大类1</a>
            <a>大类2</a>
            <a>大类3</a>
          </div>
        </div>
        <div class="menubarlist">
          <div class="listname">
            <p>学科类型:</p>
          </div>
          <div class="listbody">
            <a>全部</a>
            <a>专业1</a>
            <a>专业2</a>
            <a>专业3</a>
          </div>
        </div>
        <div class="menubarlist">
          <div class="listname">
            <p>课程类型:</p>
          </div>
          <div class="listbody">
            <a>全部</a>
            <a>直播课程</a>
            <a>点播课程</a>
            <a>题库练习</a>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="menubarbody">
        <!-- 左边主体内容 -->
        <div class="bodyleft">
          <!-- 选项 -->
          <div class="options">
            <a href>综合推荐</a>
            <p>
              价格
              <Icon type="arrow-down-b"></Icon>
            </p>
            <a href>人气</a>
          </div>
          <!-- 课程展示 -->
          <div class="topiclists">
            <!-- 单个课程样式 -->
            <div class="topicbody" v-for="list in lists.slice(0,12)" :key="list">
              <img :src="list.nav" />
              <a href>{{list.topicname}}</a>
              <p>￥{{list.prices}}/年</p>
            </div>
            <div class="pages">
              <Page :total="100" show-elevator></Page>
            </div>
          </div>
        </div>
        <!-- 右边广告 -->
        <div class="bodyright">
          <div class="recommendtitle">
            <p>热门课程</p>
          </div>
          <div class="recommendlists" v-for="list in lists.slice(0,4)" :key="list">
            <img :src="list.nav" alt />
            <a>{{list.topicname}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        },
        {
          nav:
            "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
          topicname: "设计师职业规划—互联网时代设计师该如何提升",
          prices: 599
        }
      ]
    };
  }
};
</script>

<style lang='scss'>
.page-course {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: #f2f2f2;
  .coursepos {
    width: 1250px;
    height: 100%;
    margin: 0px auto;
    .navigationbar {
      height: 73px;
      line-height: 73px;
    }
    // 菜单栏
    .menubar {
      width: 100%;
      height: 181px;
      line-height: 20px;
      background-color: #ffffff;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
      padding: 0px 40px;
      overflow: hidden;
      margin-bottom: 19px;
      .menubarlist {
        border-bottom: 1px dashed #bbbbbb;
        display: flex;
        height: 60px;
        width: 100%;
        .listname > p {
          width: 77px;
          color: rgba(57, 57, 57, 1);
          font-size: 14px;
          text-align: left;
          font-family: Roboto-regular;
          line-height: 60px;
        }
        .listbody {
          display: flex;
          > a {
            line-height: 60px;
            margin-right: 43px;
            text-decoration: none;
          }
          > a:hover {
            color: #bbbbbb;
          }
        }
      }
    }

    .menubarbody {
      width: 100%;
      height: 100%;
      display: flow-root;
      margin-bottom: 10px;
      //  主体左边
      .bodyleft {
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0);
        width: 1010px;
        height: 892px;
        float: left;
        background-color: #ffffff;
        position: relative;
        // 分页按钮
        // 选项
        .options {
          border-bottom: 1px solid #bbbbbb;
          height: 55px;
          display: flex;
          line-height: 55px;
          padding: 0px 40px;
          > a {
            margin-right: 76px;
            text-decoration: none;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
          > a:hover {
            color: #bbbbbb;
          }
          > p {
            padding-right: 76px;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
        }
        // 课程展示
        .topiclists {
          width: 100%;
          padding: 10px;
          .pages {
            position: absolute;
            right: 58px;
            bottom: 10px;
          }
          // 主体
          .topicbody {
            width: 200px;
            height: 220px;
            float: left;
            margin: 10px 20px 20px 20px;
            border-radius: 2px;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0);
            > img {
              width: 100%;
              height: 149px;
              border-radius: 2px;
            }
            > a {
              text-decoration: none;
              width: 190px;
              color: rgba(16, 16, 16, 1);
              font-size: 14px;
              display: block;
              text-align: left;
              font-weight: 700;
              font-family: SourceHanSansSC-bold;
              margin: 5px auto;
              padding-right: 10px;
            }
            > a:hover {
              color: #5b5b5b;
            }
            > p {
              color: rgba(238, 65, 60, 1);
              font-size: 14px;
              text-align: right;
              font-weight: 700;
              font-family: SourceHanSansSC-bold;
              margin-right: 10px;
            }
          }
        }
      }
      // 主体右边
      .bodyright {
        width: 219px;
        height: 892px;
        float: right;
        background-color: #ffffff;
        float: right;
        // 广告
        .recommendtitle {
          border-bottom: 1px solid #bbbbbb;
          height: 55px;
          padding-left: 24px;
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 14px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 55px;
            text-decoration: none;
          }
        }
        .recommendlists {
          margin: 17px 22px 29px 22px;
          > img {
            width: 175px;
            height: 132px;
            border-radius: 2px;
            margin-bottom: 6px;
          }
          > a {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 12px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 18px;
            text-decoration: none;
          }
          > a:hover {
            color: #5b5b5b;
          }
        }
      }
    }
  }
}
</style>